<template>
  <div class="app-container">
    <!--账单管理-账单详情-->
    <div class="top">
      <h5 class="title">账单详情</h5>
      <div class="nav">
        <span><b>账单编号： </b>{{ billDetail.billingId }}</span>
        <span><b>账单日期： </b>{{ billDetail.accDate }}</span>
        <span><b>账单金额： </b>{{ billDetail.accDate }}</span>
        <span><b>订单数量： </b>{{ tableData.length }}</span>
      </div>
      <div class="nav"><b>已开发票：</b><small class="num" v-for="(item, ind) in billDetail.invoiceFileList" :key="ind">{{ item }}</small></div>
    </div>
    <div style="padding: 0 36px;">
      <div class="h5">
        <b>当前发票信息</b>
        <el-button type="primary" round style="width: 100px;height: 32px;margin-right: 10px">匹配发票</el-button>
      </div>
      <div class="center">
        <h5 class="title">罗慕合作诊所/机构月度对账单</h5>
        <div class="baes-info">
          <div><span class="blue">公司名称：</span>{{ billDetail.luomuCompanyName }}</div>
          <div><span class="blue">医疗器械注册证编号：</span>{{ billDetail.luomuMedicalDeviceCer }}</div>
          <div><span class="blue">收款账户开户行：</span>{{ billDetail.luomuAccBankName }}</div>
          <div><span class="blue">注册证有效期：</span>{{ billDetail.luomuMedicalDeviceCerPeriod }}</div>
          <div><span class="blue">收款账号：</span>{{ billDetail.luomuAccount }}</div>
          <div><span class="blue">产品名称：</span>{{ billDetail.produtName }}</div>
        </div>
        <div class="info-cont">
          <div>
            <ul class="bill-information">
              <li><span class="name">对账日期</span><span class="text">{{ billDetail.checkDate }}</span></li>
              <li><span class="name">对账周期</span><span class="text">{{ billDetail.settlePeriod }}</span></li>
              <li><span class="name">增值税发票类型</span><span class="text">{{ billDetail.billingId }}</span></li>
              <li><span class="name">诊所/机构系统账号</span><span class="text">{{ billDetail.organId }}</span></li>
              <li><span class="name">诊所/机构名称</span><span class="text">{{ billDetail.organName }}</span></li>
              <li><span class="name">诊所/机构电话</span><span class="text">{{ billDetail.phoneNumber }}</span></li>
              <li><span class="name">诊所/机构地址</span><span class="text">{{ billDetail.orgAddress }}</span></li>
              <li><span class="name">发票公司名称</span><span class="text">{{ billDetail.invoiceTitle }}</span></li>
            </ul>
            <ul class="bill-information">
              <li><span class="name">统一社会信用代码</span><span class="text">{{ billDetail.invoiceCreditCode }}</span></li>
              <li><span class="name">发票项目</span><span class="text">{{ billDetail.itemTitle }}</span></li>
              <li><span class="name">所属诊所</span><span class="text">{{ billDetail.itemTitle }}</span></li>
              <li><span class="name">发票类型</span><span class="text">{{ billDetail.invoiceType }}</span></li>
              <li><span class="name">发票备注</span><span class="text">{{ billDetail.invoiceRemark }}</span></li>
              <li><span class="name">普通电子发票接收邮箱</span><span class="text">{{ billDetail.invoiceEmail }}</span></li>
              <li><span class="name">邮箱所属人姓名</span><span class="text">{{ billDetail.invoiceEmail }}</span></li>
            </ul>
          </div>
          <div class="mandatory">
            <div class="mandatory-cont">
              <p class="title">专票必填项</p>
              <div>
                <ul class="bill-information">
                  <li><span class="name">经营地址</span><span class="text">{{ billDetail.invoiceWorkAddress }}</span></li>
                  <li><span class="name">经营电话</span><span class="text">{{ billDetail.invoiceWorkTel }}</span></li>
                  <li><span class="name">开户行</span><span class="text">{{ billDetail.invoiceBankName }}</span></li>
                  <li><span class="name">银行账号</span><span class="text">{{ billDetail.invoiceAccountNumber }}</span></li>
                </ul>
                <ul class="bill-information">
                  <li><span class="name">发票收件人姓名</span><span class="text">{{ billDetail.invoiceRecieverName }}</span></li>
                  <li><span class="name">发票收件人电话</span><span class="text">{{ billDetail.invoiceRecieverMobile }}</span></li>
                  <li><span class="name">发票寄送地址</span><span class="text">{{ billDetail.invoicePostAddress }}</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="total">
      <span class="total-left">本期共5个待核对账单</span>
      <span class="total-right">共计：22500元</span>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column type="index" width="50" />
        <el-table-column prop="billingId" width="100" label="订单编号"></el-table-column>
        <el-table-column prop="patientName" width="120" label="病例姓名"></el-table-column>
        <el-table-column prop="patientId" width="120" label="罗慕病历号"></el-table-column>
        <el-table-column prop="doctorName" width="120" label="医生"></el-table-column>
        <el-table-column prop="createDate" width="150" label="首副确认制作时间"></el-table-column>
        <el-table-column prop="packageName" width="120" label="套餐名称"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="产品名称"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="金额"></el-table-column>
        <el-table-column prop="remark" width="120" label="备注"></el-table-column>
        <el-table-column prop="newAmount" width="120" label="调整金额"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="调整说明"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="操作"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getBillingDetails } from '@/api/oper';

export default {
  data() {
    return {
      billDetail: {},
      tableData: []
    };
  },
  created() {
    getBillingDetails(this.$route.query.id).then(res => {
      this.tableData = res.billingDetailList || [];
      this.billDetail = res
    });
  },
  methods: {
    blocDetail(row) {
      this.$router.push('details');
    }
  }
};
</script>

<style lang="scss" scoped>
    .top {
      width: 100%;
    }
    .top .title {
        margin: 0 0 20px;
        font-size: 30px;
        color: #02a7f0;
    }
    .top .nav {
      color: #666;
      margin-bottom: 21px;

      span {
        margin-right: 68px;
      }

      .num {
        display: inline-block;
        padding: 3px 12px;
        border-right: 14px;
        background: #508FCC;
        color: #fff;
      }
    }
    .h5 {
      display: flex;
      justify-content: space-between;
      align-content: center;
    }
    .bill-btn {
        width: 190px;
        height: 36px;
        border-radius: 18px;
        background: #D8E4F6;

        span {
            display: inline-block;
            width: 94px;
            font-size: 14px;
            color: #508FCC;
            text-align: center;
            line-height: 36px;
        }
        .active {
            border: 1px solid #D8E4F6;
            border-radius: 18px;
            background: #fff;
        }
    }

    .operating-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 27px;
    }

    .center {
        padding: 0 36px 36px;
        box-shadow: 0px 20px 16px rgba(216, 228, 246, 0.6);
        .title {
          height: 58px;
          line-height: 58px;
          margin: 0;
          border-bottom: 1px solid #E6E6E6;;
          text-align: center;
        }
        .baes-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;

          &>div {
            width: 50%;
            text-align: left;
            margin-top: 20px;
          }

          .blue {
            color: #508FCC;
          }
        }
        .info-cont {
          margin-top: 30px;
          padding: 32px 0;
          background: #F1F2F6;
        }
        .info-cont > div {
          display: flex;
          justify-content: space-between;
        }
        .bill-information {
          margin: 0;
          padding: 0;
          width: 50%;
          &:first-child {
            border-right: 1px solid #D8E4F6;
          }
          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 20px;
            list-style-type:none;
            line-height: 22px;
            &:last-child {
              margin: 0;
            }
            .name {
              display: inline-block;
              width: 200px;
              text-align: right;
              font-size: 14px;
              font-weight: bold;
              color: #333;
            }
            .text {
              flex: 1;
              margin-left: 12px;
              font-size: 14px;
              color: #666;
            }
          }
        }
        .mandatory {
          width: 100%;
          height: 176px;
          margin-top: 30px;
          padding: 0 48px;

          &-cont {
            width: 100%;
            display: flex;
            background: #F8F8FA;

            .title {
              width: 172px;
              height: 100%;
              text-align: center;
              line-height: 176px;
              border-right: 1px dashed #ccc;
            }

            & > div {
              width: 80%;
              margin-top: 20px;
              display: flex;
              justify-content: space-between;

              .bill-information {
                border: none;
                .name {
                  width: 100px;
                }
              }
            }
          }
        }
    }

    .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32px;
        font-size: 14px;
        .total-left {
            font-weight: bold;
            color: #333;
        }
        .total-right {
            color: #666;
        }
    }

    .bottom {
        margin-top: 20px;
    }
</style>
